// import React from 'react'
import React, { Component } from 'react'

import '../../App.css'
import CommentAdd from '../componments/comment-add/commentAdd'
import CommentList from '../componments/comment-list/commentList'
class App extends Component {
  // constructor(props) {
  //   super(props)
  //   let time = new Date().getTime()
  //   let time2 = Date.now()
  //   this.state = {
  //     comments: [
  //       { time: time, name: 'Jane', content: 'good' },
  //       { time: time, name: 'Jane', content: 'good' },
  //     ],
  //   }
  // }
  state = {
    comments: [
      { name: 'Jane', content: 'good' },
      { name: 'Jane', content: 'good' },
    ],
  }

  addComment = (comment) => {
    console.log('addComment')
    const { comments } = this.state
    comments.unshift(comment)
    this.setState(comments)
  }
  delComment = (index) => {
    console.log('delComment')
    const { comments } = this.state
    comments.splice(index, 1)
    this.setState(comments)
  }
  render() {
    const { comments } = this.state
    return (
      <div className="App">
        <header classNameName="site-header jumbotron">
          <div className="container">
            <div className="row">
              <div className="col-xs-12">
                <h1>请发表对React的评论</h1>
              </div>
            </div>
          </div>
        </header>
        <CommentAdd addComment={this.addComment} />
        <CommentList
          comments={this.state.comments}
          delComment={this.delComment}
        />
      </div>
    )
  }
}
// function App() {}

export default App
